<template>
  <v-dialog v-model="infoDialog" persistent scrollable max-width="1200px" :fullscreen="$vuetify.breakpoint.xsOnly">
    <v-card>
      <v-card-title>
        <span class="headline">{{ name }}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-card-text class="px-0 py-0">
        <v-tabs v-model="active" color="cyan" dark slider-color="yellow" >
          <v-tab v-for="n in info" :key="n.hostname" ripple >
            {{ n.hostname }}
          </v-tab>
          <v-tab-item v-for="n in info" :key="n.hostname" >
            <v-card flat>
              <v-card-text>
                <v-textarea label="response" rows="18" outline :value="fmt(n.result)"></v-textarea>
              </v-card-text>
            </v-card>
          </v-tab-item>
        </v-tabs>
      </v-card-text>
      <v-divider></v-divider>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" small @click.native="closeProjectInfo()"><h4>关闭</h4></v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import {getFormatData} from '../../utils/common'
import { createNamespacedHelpers } from 'vuex'
const { mapActions } = createNamespacedHelpers('projectinfo')

export default {
  name: 'initproject',
  data: function () {
    return this.$store.state.projectinfo
  },
  methods: {
    ...mapActions({
      closeProjectInfo: 'closeProjectInfo',
      loadProjectInfo: 'loadProjectInfo',
      handlerProject: 'handlerProject'
    }),
    fmt (result) {
      return getFormatData(result)
    }
  },
  props: {
    infoDialog: {
      type: Boolean,
      default: null
    },
    id: {
      type: Number,
      default: null
    }
  },
  watch: {
    infoDialog () {
      if (this.infoDialog) {
        this.loadProjectInfo(this.id)
      } else {
        this.$store.dispatch('listproject/handlerProject')
      }
    }
  }
}
</script>
